<template>
  <div>
    <div v-loading="loading" class="panel">
      <div class="panel-header">交易号: {{ $route.params.id }}</div>
      <i-form
        ref="form"
        class="transation-deatail-form"
        :items="formItems"
        :rules="rules"
        :model="form"
        :inline="true"
        :layout-span="24"
        :default-span="6"
        :label-width="150"
      >
        <template v-if="this.form.consumeBillNum" slot="mchAccount">
          <el-form-item label="关联订单">
            <a :href="`/#/order/detail/${this.form.consumeBillNum}`">{{
              this.form.consumeBillNum
            }}</a>
            <!-- 缺少订单 -->
          </el-form-item>
        </template>
      </i-form>
    </div>
    <el-button type="primary" @click="handleGoBack">返回</el-button>
  </div>
</template>
<script>
import formatter from '@/utils/format'
import { selectChargeOrderDetail } from '@/api/transation'
import dayjs from 'dayjs'
export default {
  name: 'TransationDetail',
  data() {
    return {
      formItems: [
        {
          label: '用户手机号：',
          value: 'userMobile',
          type: 'detail',
          ifRender: () => {
            return !!this.form.userMobile
          },
        },
        {
          label: '交易时间：',
          value: 'paymentTime',
          type: 'detail',
          ifRender: () => {
            return !!this.form.paymentTime
          },
          formatter: () => {
            if (this.form.paymentTime) {
              return dayjs(this.form.paymentTime).format('YYYY-MM-DD HH:mm:ss')
            }

            return '--'
          },
        },
        {
          label: '交易金额(元)：',
          value: 'totalMoney',
          type: 'detail',
          ifRender: () => {
            return !!this.form.totalMoney || this.form.totalMoney === 0
          },
        },
        {
          label: '支付渠道：',
          value: 'paymentType',
          type: 'detail',
          formatter,
          ifRender: () => {
            return !!this.form.paymentType || this.form.paymentType === 0
          },
        },
        {
          label: '第三方费率：',
          type: 'detail',
          formatter: () => {
            return '0.6%'
          },
          ifRender: () => {
            return this.form.paymentType !== 13
          },
        },
        {
          label: '第三方手续费(元)：',
          type: 'detail',
          value: 'serviceCharge',
          ifRender: () => {
            return this.form.serviceCharge || this.form.serviceCharge == 0
          },
        },
        {
          label: '入账金额(元)：',
          type: 'detail',
          value: 'actualMoney',
          ifRender: () => {
            return this.form.actualMoney || this.form.actualMoney == 0
          },
        },
        {
          label: '运营商入账金额(元)：',
          type: 'detail',
          value: 'mchSplitCost',
          ifRender: () => {
            return this.form.actualMoney || this.form.actualMoney == 0
          },
        },
        {
          label: '收款方：',
          type: 'detail',
          value: 'mchName',
          ifRender: () => {
            return !!this.form.mchName
          },
        },
        {
          label: '收款账号：',
          type: 'detail',
          value: 'mchAccount',
          ifRender: () => {
            return !!this.form.mchAccount
          },
        },
        // {
        //   label: '关联订单：',
        //   type: 'detail',
        //   value: 'mchAccount',
        //   ifRender: () => {
        //     return !!this.form.mchAccount
        //   }
        // },
        {
          slot: 'mchAccount',
        },
        {
          label: '交易类型：',
          type: 'detail',
          value: 'billType',
          formatter,
          ifRender: () => {
            return !!this.form.billType
          },
        },
        {
          label: '是否退款：',
          type: 'detail',
          value: 'refund',
          formatter: () => {
            if (this.form.refund) return '是'
            return '否'
          },
        },
        {
          label: '退款金额：',
          type: 'detail',
          value: 'refundFee',
          formatter: () => {
            return this.form.refundFee ? this.form.refundFee + '元' : '0元'
          },
        },
        {
          label: '关联退款号：',
          type: 'detail',
          value: 'refundNum',
          formatter: () => {
            return this.form.refund && this.form.refundNum
              ? this.form.refundNum
              : '/'
          },
        },
        {
          label: '退款时间：',
          type: 'detail',
          value: 'refundTime',
          formatter: () => {
            return this.form.refund && this.form.refundTime
              ? dayjs(this.form.refundTime).format('YYYY-MM-DD HH:mm:ss')
              : '/'
          },
        },
        {
          label: '关联电站：',
          type: 'detail',
          value: 'stationName',
          ifRender: () => {
            return !!this.form.stationName
          },
        },
        {
          label: '端口：',
          type: 'detail',
          value: 'pgnum',
          ifRender: () => {
            return !!this.form.pgnum
          },
        },
      ],
      rules: {},
      form: {},
      loading: false,
    }
  },
  methods: {
    handleGoBack() {
      if (this.$route.query && this.$route.query.form === 'unusualList') {
        this.$router.push('/transation/unusualList')
      } else if (this.$route.query && this.$route.query.form === 'noticeList') {
        this.$router.push('/myself/noticeList')
      } else {
        this.$router.push('/transation/list')
      }
    },
  },
  mounted() {
    if (!this.$route.params.id) return

    this.loading = true
    selectChargeOrderDetail({
      paymentBillNum: this.$route.params.id,
    })
      .then((res) => {
        this.form = res
      })
      .catch((err) => {
        console.log(err)
      })
      .finally(() => {
        this.loading = false
      })
  },
}
</script>
<style lang="scss">
.transation-deatail-form {
  padding-left: 20px;
  .el-form-item__content {
    span {
      color: #988ca4;
    }
  }
}
</style>
